<template>
  <div class="ay_audio_wrapper">
    <div class="ay_audio">
      <div class="ay_audio_play none-select-css">
        <div class="relative-full" v-show="!isPlaying" @click="handlePlayClick(true)">
          <img src="./assets/images/dashboard/play.png" alt="">
        </div>
        <div class="relative-full" v-show="isPlaying" @click="handlePlayClick(false)">
          <img src="../assets/images/dashboard/stop.png" alt="">
        </div>
      </div>
      <div class="ay_audio_progress">
        <div class="ay_audio_progress_bar">
          <div class="ay_audio_played" :style="{width:progress}">
            <div class="ay_audio_current_point"></div>
          </div>
        </div>
        <div class="ay_audio_time">
          <span>{{ currentTime }}</span>/<span>{{ total }}</span>
        </div>
      </div>
      <audio ref="audio" :src="src" style="display: none"></audio>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Audio',
  props: {
    src: {
      type: String,
      default: 'http://downsc.chinaz.net/Files/DownLoad/sound1/201906/11582.mp3',
    },
  },
  watch: {
    // src(val) {
    //   console.log(val);
    // },
  },
  data() {
    return {
      audio: null,
      isPlaying: false,
      currentTime: '00:00',
      total: '00:00',
      progress: '0%',
    };
  },

  mounted() {
    this.audio = this.$refs.audio;
    this.audio.addEventListener('loadedmetadata', () => {
      // console.log(this.audio.duration);
      this.total = this.transTime(Math.floor(this.audio.duration));
    });

    this.audio.addEventListener('ended', () => {
      // this.progress = '0%';
      this.isPlaying = false;
    });

    this.audio.addEventListener('timeupdate', () => {
      this.currentTime = this.transTime(Math.floor(this.audio.currentTime));
      this.progress = `${this.audio.currentTime / this.audio.duration * 100}%`;
    }, false);
  },

  methods: {
    transTime(time) {
      // 获取分
      let minute = Math.floor(time / 60);
      if (minute < 10) {
        minute = `0${minute}:`;
      } else {
        minute = `${minute}:`;
      }
      let second = time % 60;
      if (second < 10) {
        second = `0${second}`;
      }
      return minute + second;
    },
    handlePlayClick(play) {
      this.isPlaying = play;
      if (this.isPlaying) {
        this.audio.play();
      } else {
        this.audio.pause();
      }
    },
  },
};
</script>

<style>
.ay_audio_wrapper {
  display: inline-block;
  height: 32px;
  width: 200px !important;
  margin-left: 14px;
}

.ay_audio {
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  border-radius: 8px;
  background-color: #ecf3ff;
  padding: 0 6px;
}

.ay_audio_play {
  cursor: pointer;
  width: 24px;
  height: 24px;
  margin-right: 14px;
  border-radius: 15px;
  background-color: white;
}

.ay_audio_play > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2px;
}

.ay_audio_play img {
  width: 10px;
  height: 10px;
}

.ay_audio_progress {
  display: flex;
  align-items: center;
  flex: 1;
  width: 100%;
}

.ay_audio_progress_bar {
  flex: 1;
  height: 2px;
  background: #FFFFFF;
}

.ay_audio_time {
  width: 80px;
  max-width: 80px;
  min-width: 80px;
  font-size: 12px;
  font-weight: 100;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #363636;
}

.ay_audio_played {
  position: relative;
  height: 2px;
  background-color: #304eec;
}

.ay_audio_current_point {
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #304eec;
}

.ay_audio_current_point:hover {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}
</style>
